<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>开卡记录</span>
      </div>
    </div>
    <div class="pad_20 flex-bet">
      <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
        <el-form-item label="关键词">
          <el-input v-model="formInline.user" size="medium" placeholder="关键词" @input="selach"></el-input>
        </el-form-item>
        <el-form-item label="开卡日期">
          <el-date-picker
                  v-model="formInline.region"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="selach">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selach" size="medium">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="flex">

      </div>
    </div>
    <el-table
            :data="list"
            v-loading="listLoading"
            :element-loading-text="elementLoadingText"
            stripe
            style="width: 100%">
      <el-table-column
              prop="time"
              label="用户信息"
      >
        <template slot-scope="scope">
          <div class="flex flex-y-top">
            <div class="">
              <img
                      class="goodlogo bor_rad50"
                      :src="scope.row.portrait"/>
            </div>
            <div class="mar_l10">
              <div class="flex">
                <div class="">
                  <div>{{scope.row.userName}}</div>
                  <div><el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.userId}}）</el-tag></div>
                </div>
              </div>
<!--              <p class="fon_12 color_9 mar_t5">小程序</p>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
              prop="userTel"
              label="手机号"
      >
      </el-table-column>
      <el-table-column
              prop="cardName"
              label="会员等级"
      >
      </el-table-column>
      <el-table-column
              prop="createdAt"
              label="开卡时间"
      >
      </el-table-column>
<!--      <el-table-column-->
<!--              label="操作"-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <div class="flex">-->
<!--            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            :current-page.sync='page.currentPage'
            @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
  import {cardRecord} from "@/api/user";
  import {changeDate} from "@/utils/index";

  export default {
    created() {
      this.fetchData();
    },
    data () {
      return {
        formInline: {
          user: '',
          region: ''
        },
        list: [],
        listLoading: false,
        selectRows: "",
        elementLoadingText: "正在加载...",
        page: {
          total: 0,
          size: 10,
          currentPage: 1,
        },
      }
    },
    methods: {
      async fetchData() {
        this.listLoading = true;
        if(this.formInline.region && this.formInline.region.length){
          var startTime  = changeDate(this.formInline.region[0]);
          var endTime = changeDate(this.formInline.region[1]);
        }
        let param={
          page: this.page.currentPage,
          startTime,
          endTime,
          keyword: this.formInline.user,
        }
        const {data, count} = await cardRecord(param);
        this.list = data;
        this.page.total = count;
        setTimeout(() => {
          this.listLoading = false;
        }, 100);
      },
      selach(){
        this.fetchData()
      },
      setSelectRows(val) {
        this.selectRows = val;
      },
      // handleDelete(row) {
      //   if (row.id) {
      //     this.$baseConfirm("你确定要删除当前项吗", null, async () => {
      //       const {msg} = await changeMemberLabel({id: row.id, status: 2});
      //       this.$baseMessage(msg, "success");
      //       this.fetchData();
      //     });
      //   } else {
      //     if (this.selectRows.length > 0) {
      //       const id = this.selectRows.map((item) => item.id);
      //       this.$baseConfirm("你确定要删除选中项吗", null, async () => {
      //         const {msg} = await changeMemberLabel({id, status: 2});
      //         this.$baseMessage(msg, "success");
      //         this.fetchData();
      //       });
      //     } else {
      //       this.$baseMessage("未选中任何行", "error");
      //       return false;
      //     }
      //   }
      // },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.fetchData();
      },
    }
  }
</script>
